<template>
  <el-main>
    <div class="index-other">
      <!-- <div class="index-title">
        <el-icon color="#409EFC" :size="25"><Operation /></el-icon>
        <div>数据总览</div>
      </div> -->
      <div class="index-an">
        <div>
          <div>在职人员</div>
          <div class="index-digit">{{ teacherTotal }}</div>
        </div>
        <div>
          <div>在校学生</div>
          <div class="index-digit">{{ studentTotal }}</div>
        </div>
        <div>
          <div>应用总数</div>
          <div class="index-digit">{{ appTotal }}</div>
        </div>
        <div>
          <div>总登录次数</div>
          <div class="index-digit">{{ visitTotal }}</div>
        </div>
      </div>
    </div>
    <div class="index-function">
      <div class="index-title">
        <el-icon color="#409EFC" :size="25">
          <IconMenu />
        </el-icon>
        <div>应用中心</div>
      </div>
      <el-space wrap>
        <!-- <el-card
          :body-style="{ padding: '0px' }"
          v-for="item in list"
          :key="item.id"
          @click="goDetail(item.appName, item.url)"
        >
          <div class="card-dv">
            <el-image :src="item.icon" class="index-image">
              <template #error>
                <div class="image-slot">
                  <el-icon class="index-image"><icon-picture /></el-icon>
                </div>
              </template>
</el-image>
<span class="app-name">{{ item.appName }}</span>
</div>
</el-card> -->

        <el-card :body-style="{ padding: '0px' }" v-for="item in list" :key="item.id" @click="goDetail(item)">
          <div class="card-dv">
            <el-image :src="item.icon" class="index-image">
              <template #error>
                <div class="image-slot">
                  <el-icon class="index-image"><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
            <span class="app-name">{{ item.appName }}</span>
          </div>
        </el-card>

      </el-space>
    </div>

    <bottomView />
  </el-main>
</template>
<script>
import { httpService } from "@/utils/httpService";
import bottomView from "@/components/bottom.vue";

import {
  ElMessageBox,
  ElMessage,
  ElButton,
  ElForm,
  ElMenu,
  ElMenuItem,
  ElIcon,
  ElSubMenu,
  ElRadioButton,
  ElRadioGroup,
  ElCol,
  Action,
} from "element-plus";

import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
  ArrowDown,
  Operation,
  Comment, Histogram,
  Picture as IconPicture,
} from "@element-plus/icons-vue";
import { ref } from "vue";
export default {
  name: "Main",
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      list: [],
      appTotal: 0,
      studentTotal: 0,
      teacherTotal: 0,
      visitTotal: 0,
    };
  },
  components: {
    ElCol,
    ElButton,
    ElForm,
    ElMenu, Histogram,
    ElMenuItem,
    ElIcon,
    ElSubMenu,
    ElRadioGroup,
    ElRadioButton,
    Location,
    Document,
    IconMenu,
    ElMessageBox,
    ElMessage,
    Setting,
    ArrowDown,
    Operation,
    Comment,
    IconPicture,
    bottomView,
  },
  mounted() {
    this.addBodyBackGround();
    this.getListApp();
    this.getTotalData();
  },
  methods: {
    goDetail(item) {
      // console.log(item);
      if (item.background) {
        let routeData = this.$router.resolve({
          path: item.background,
        });
        window.open(routeData.href, "_blank");
      } else {
        //这里post调用后端接口，后端接口负责跳转业务
        let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
        params.append("returnUrl", item.url);
        httpService("/javaApi/doLogin", params, "post").then((data) => {
          if (data.code == 200) {
            window.open(data.object, "_blank");
          } else {
            ElMessage.error(data.message);
          }
        });
      }
    },
    getListApp() {
      httpService("/javaApi/getAllApp", "", "get").then((data) => {
        this.list = data;
        this.appTotal = data.length;
      });
    },
    getTotalData() {
      httpService("/javaApi/getTotalData", "", "get").then((data) => {
        this.studentTotal = data.object.studentTotal;
        this.teacherTotal = data.object.teacherTotal;
        this.visitTotal = data.object.visitTotal;
      });
    },

    // 添加背景图
    addBodyBackGround() {
      // document.body.style.background = "white";
    },
  },
};
</script>

<style>
.app-name {
  white-space: nowrap;
  /*强制span不换行*/
  display: inline-block;
  /*将span当做块级元素对待*/
  overflow: hidden;
  /*超出宽度部分隐藏*/
  text-overflow: ellipsis;
  /*超出部分以点号代替*/
  line-height: 0.9;
  /*数字与之前的文字对齐*/

  width: calc(100% - 60px);
  /* width: calc(100% - 100px); */
}

body {
  margin: 0;
  color: #34495e;
}

.card-dv {
  display: flex;
}

.card-dv span {
  line-height: 50px;
  margin-left: 10px;
}

.index-function {
  width: calc(100% - 20px);
  padding: 10px;
  /* min-height: calc(100vh - 410px); */
  min-height: calc(100vh - 350px);
  background: white;
  color: #303133;
  text-align: left;
  padding-bottom: 30px;
  margin-bottom: 10px;
}

.index-other {
  width: calc(100% - 20px);
  padding: 10px;
  background: white;
  color: #303133;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 10px;
  /* padding-bottom: 10px; */
}

.el-link {
  vertical-align: initial;
  line-height: normal;
  font-size: 16px;
  font-weight: normal;
}

.index-image {
  width: 50px;
  height: 50px;
}

.el-main {
  color: var(--el-text-color-primary);
  text-align: center;
  background: #eff3f5;
  padding: 10px 10px 10px 10px;
}

.el-card:hover {
  margin-top: -10px;
}

.index-title {
  padding: 10px;
  border-bottom: 1px solid #e0e5e9;
  margin-bottom: 10px;
  color: #409efc;
  display: flex;
}

.index-title div {
  line-height: 25px;
  margin-left: 4px;
}

@media only screen and (max-width: 1024px) {
  .left-aside {
    display: none;
  }

  .index-an {
    /* display: flex; */
  }

  .index-an div {
    flex: 1;
    text-align: center;
    padding: 8px;
  }

  .index-digit {
    font-size: 30px;
    color: #409eff;
  }

  .el-card {
    padding: 20px;
  }

  .el-space__item {
    width: 100%;
  }
}

@media only screen and (min-width: 1024px) {
  .el-card {
    transition: all 0.5s;
    padding: 20px;
    width: 173px;
  }

  .index-an {
    display: flex;
  }

  .index-an div {
    flex: 1;
    text-align: center;
    padding: 8px;
  }

  .index-digit {
    font-size: 30px;
    color: #409eff;
  }
}
</style>
